<template>
  <div class="box" v-loading="loading">
    <client-only>
      <div class="portal-main">
        <div class="user-card">
          <!-- {{ user }} -->
          <el-avatar :size="80" style="cursor: pointer;">
            <img class="portrait" @click="modification('portrait')" :src="user.portrait ? user.portrait : 'https://wmskr-erps.oss-cn-hangzhou.aliyuncs.com/adv/portrait.png'" />
          </el-avatar>
          <div class="card-box">
            <!-- ||  $t('portal.tourist') -->
            <div class="username">{{ user.cellphone  }}<img src="../../assets/img/VIP.png" alt="" /></div>
            <!-- <div class="money">{{$t('portal.balance')}}：{{ (user.money ? user.money : 0) | thousands }}</div> -->
            <div class="money"><img src="../../assets/img/jifen.jpg" alt="" />{{$t('portal.balance')}}：{{ (user.integral ? user.integral : 0)| thousands}} 원</div>
            <!-- <NuxtLink class="personal" to="/user/userinfo">{{$t('portal.personal')}}></NuxtLink> -->
            <div class="money">
              <span><img src="../../assets/img/mingc.png" alt="" />{{ $t('userinfo.nickname') }}</span>：
              <span style="margin-right: 10px;">{{user.nickname ? user.nickname : ''}}</span>
              <el-link type="primary" :underline="false" @click="modification('nickname')">{{$t('common.amend')}}</el-link>
            </div>
            <div class="money">
              <span><img src="../../assets/img/email.png" alt="" />{{ $t('userinfo.email') }}</span>：
              <span style="margin-right: 10px;">{{user.email ? user.email : ''}}</span>
              <el-link type="primary" :underline="false" @click="modification('email')">{{$t('common.amend')}}</el-link>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="discard">
        <div class="discard-user">
          <div class="discard-top">
            <img class="discard-top-img" src="../../assets/img/VIP.png" alt="">
            <el-avatar :size="30" style="background-color: #e5e5ee;">
              <img src="../../assets/img/peo.png" />
            </el-avatar>
            <img src="../../assets/img/jp.png" alt="" class="discard-jp">
          </div>
        </div>
        <div>
          <div class="brackets">
            <div></div>
          </div>
        </div>
        <div class="discard-card">
          <div v-for="(item,index) in userList" :key="index" class="avatar">
            <el-tooltip placement="bottom-start" effect="light">
              <div slot="content">팀원：{{ item.nickname||'-' }}<br />휴대폰：{{ item.cellphone||'-' }}</div>
              <el-avatar :size="25" style="background-color: aliceblue;">
                <img src="../../assets/img/teo.png" alt="" />
              </el-avatar>
            </el-tooltip>
          </div>
        </div>
        <!-- <div class="discard-card">
        <div v-for="(item,index) in userList" :key="index" class="avatar">
          <el-tooltip placement="bottom-start" effect="light">
            <div slot="content">姓名：{{ item.nickname||'-' }}<br />手机号:{{ item.cellphone||'-' }}</div>
            <el-avatar :size="40" style="background-color: aliceblue;">
              <img src="../../assets/img/teo.png" alt="" />
            </el-avatar>
          </el-tooltip>
        </div>
      </div> -->
      </div>

      <el-divider></el-divider>
      <!-- <div class="user-title">{{$t('portal.browsing_history')}}</div>
    <div class="browse-box">
      <NuxtLink class="card" v-for="(item, index) in browseList" :key="index" :to="{ path: `/product/detail/${item.good_id}`}">
        <el-image v-if="item.good" class="image" :src="item.good.resources.img | smallImage(200)" fit="cover" lazy />
        <div v-if="item.good" class="name">{{item.good.name}}</div>
      </NuxtLink>
    </div> -->
      <div class="indent-box">
        <div class="li">
          <div class="icon bg-blue"><i class="iconfont dsshop-icon-"></i></div>
          <div class="describe">
            <div class="name">{{$t('portal.orders_paid')}}：<span>{{ quantity.obligation ? quantity.obligation : 0 }}</span></div>
            <NuxtLink class="link" :to="{ path: '/user/indent/list', query: { index: 1 }}">{{$t('hint.error.examine', {attribute: $t('portal.orders_paid')})}} ></NuxtLink>
          </div>
        </div>
        <div class="li">
          <div class="icon bg-purple"><i class="iconfont dsshop-daifahuo"></i></div>
          <div class="describe">
            <div class="name">{{$t('portal.orders_shipped')}}：<span>{{ quantity.waitdeliver ? quantity.waitdeliver : 0 }}</span></div>
            <NuxtLink class="link" :to="{ path: '/user/indent/list', query: { index: 2 }}">{{$t('hint.error.examine', {attribute: $t('portal.orders_shipped')})}} ></NuxtLink>
          </div>
        </div>
        <div class="li">
          <div class="icon bg-pink"><i class="iconfont dsshop-daipingjia"></i></div>
          <div class="describe">
            <div class="name">{{$t('portal.orders_receivingd')}}：<span>{{ quantity.waitforreceiving ? quantity.waitforreceiving : 0 }}</span></div>
            <NuxtLink class="link" :to="{ path: '/user/indent/list', query: { index: 3 }}">{{$t('hint.error.examine', {attribute: $t('portal.orders_receivingd')})}} ></NuxtLink>
          </div>
        </div>
      </div>
      <el-dialog :title="dialogTitle" :visible.sync="centerDialogVisible" :close-on-click-modal="false" width="600px">
        <el-form class="ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <template v-if="dialogType === 'portrait'">
            <el-form-item :label="$t('userinfo.head_portrait')" prop="portrait">
              <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="handleProgress" :action="uploadFile.url"
                :headers="uploadFile.header" :data="uploadFile.data" class="avatar-uploader">
                <span v-if="imgProgress">
                  <el-progress :percentage="imgProgressPercent" type="circle" class="progress-img" />
                </span>
                <span v-else>
                  <img v-if="ruleForm.portrait" :src="ruleForm.portrait" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </span>
                <div slot="tip" class="el-upload__tip">2M 용량 미만 jpg/png/gif 파일만 업로드 가능</div>
              </el-upload>
            </el-form-item>
          </template>
          <template v-else-if="dialogType === 'nickname'">
            <el-form-item :label="$t('userinfo.nickname')" prop="nickname">
              <el-input maxlength="30" v-model="ruleForm.nickname" :placeholder="$t('hint.error.import', {attribute: '고객님 성함 입력 해주세요'})" clearable></el-input>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item :label="$t('userinfo.email')" prop="email">
              <el-input maxlength="255" v-model="ruleForm.email" :placeholder="$t('hint.error.import', {attribute: $t('userinfo.email')})" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item :label="$t('find_password.verification_code')" prop="code">
            <el-input v-model.number="ruleForm.code" maxlength="5" :placeholder="$t('hint.error.import', {attribute: $t('find_password.verification_code')})" clearable></el-input>
            <el-button class="code-button" :loading="buttonLoading" type="danger" round size="mini" :disabled="disabled" @click="getCode">{{codename + seconds + unit}}</el-button>
          </el-form-item> -->
          </template>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button :loading="buttonLoading" @click="centerDialogVisible = false">{{$t('common.cancel')}}</el-button>
          <el-button :loading="buttonLoading" type="danger" @click="submitForm">{{$t('common.confirm')}}</el-button>
        </span>
      </el-dialog>
    </client-only>
  </div>
</template>

<style lang='scss' scoped>
@import './scss/portal';
</style>

<script>
import js from './js/portal'
export default js
</script>
